import { PxProgress } from "px-ui";

/**
 * @description: 获取table表格的表头（cloumns）信息
 * @return {Array<CommonTable.TableCloumnsType>}
 */
export const useTableCloumns = (): Array<CommonTable.TableCloumnsType> => {
  return [
    {
      label: "设备位号",
      prop: "eqpName",
      width: 100
    },
    {
      label: "过滤器名称",
      width: 120,
      getColumText({ row }: any) {
        return row?.lifeCycle?.sparePartName;
      }
    },
    {
      label: "过滤器状态",
      width: 100,
      render({ row }: any) {
        let color = "";
        let msg = "";
        if (row?.lifeCycle?.remainingDays < 1) {
          color = "#FF0000";
          msg = "失效";
        } else if (row?.lifeCycle?.isExpiring) {
          color = "#FFBD00";
          msg = "临期";
        } else {
          color = "#10B981";
          msg = "健康";
        }
        return () => <div style={{ color }}>{msg}</div>;
      }
    },
    {
      label: "剩余寿命（天）",
      width: 120,
      render({ row }: any) {
        let color = "";
        const msg = row?.lifeCycle?.remainingDays;
        if (row?.lifeCycle?.remainingDays < 1) {
          color = "#FF0000";
        } else if (row?.lifeCycle?.isExpiring) {
          color = "#FFBD00";
        } else {
          color = "#10B981";
        }
        return () => <div style={{ color }}>{msg}</div>;
      }
    },
    {
      label: "额定寿命",
      width: 200,
      render({ row }: any) {
        const percentage = Math.round((100 * row?.lifeCycle?.usageDays) / row?.lifeCycle?.ratedUsageDays);
        let customColor = "";
        if (row?.lifeCycle?.remainingDays < 1) {
          customColor = "#FF0000";
        } else if (row?.lifeCycle?.isExpiring) {
          customColor = "#FFBD00";
        } else {
          customColor = "#10B981";
        }
        return () => (
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <PxProgress style={{ flex: 1, width: 0 }} percentage={percentage} color={customColor} />
            <div style={{ width: "60px", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "2px" }}>
              <div style={{ color: customColor }}>{row?.lifeCycle?.usageDays}</div> / <div>{row?.lifeCycle?.ratedUsageDays}</div>
            </div>
          </div>
        );
      }
    },
    {
      label: "预测寿命",
      width: 200,
      render({ row }: any) {
        if (row?.lifeCycle?.forecastUsageDays) {
          const percentage = Math.round((100 * row?.lifeCycle?.usageDays) / row?.lifeCycle?.forecastUsageDays);
          let customColor = "var(--px-color-primary)";
          return () => (
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <PxProgress style={{ flex: 1, width: 0 }} percentage={percentage} color={customColor} />
              <div style={{ width: "60px", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "2px" }}>
                <div style={{ color: customColor }}>{row?.lifeCycle?.usageDays}</div> / <div>{row?.lifeCycle?.forecastUsageDays}</div>
              </div>
            </div>
          );
        } else {
          return () => "--";
        }
      }
    },
    {
      label: "上次寿命（天）",
      width: 120,
      getColumText({ row }: any) {
        return row?.lifeCycle?.preUsageDays;
      }
    },
    {
      label: "前次工单日期",
      width: 120,
      getColumText({ row }: any) {
        return row?.lifeCycle?.preUsageDate;
      }
    },
    {
      ////////////////////////////////
      label: "耗材类别-品名",
      width: 120,
      getColumText({ row }: any) {
        return `${row?.lifeCycle?.sparePartCode}-${row?.lifeCycle?.sparePartName}`;
      }
    },
    {
      ////////////////////////////////
      label: "规格型号-数量",
      width: 120,
      getColumText({ row }: any) {
        return `${row?.lifeCycle?.brandValDesc}-${row?.lifeCycle?.batchNo}`;
      }
    },
    {
      ////////////////////////////////
      label: "耗材总数",
      width: 100,
      getColumText({ row }: any) {
        return row?.lifeCycle?.batchNo;
      }
    }
  ];
};
